<!DOCTYPE html>
<html>
	<head>
			<meta charset="utf-8">
			<title></title>
		</head>
		
		
		<body>
			
			<h1>标题信息</h1>
			<div>
				<p>段落1段落1段落1段落1段落1段落1段落1</p>
				<p>段落2段落2<p>
				<p>段落2段落3<p>
			</div>
			<div>
				节点名字nodeName:<input type="text" id="txtNodeName" /><br />
				节点类型nodeType:<input type="text" id="txtNodeType"  /><br />
				节点值nodeValue:<input type="text" id="txtNodeValue"  /><br />
				节点的子元素数量:<input type="text" id="txtChildCount"  /><br />
			</div>
			<button onclick="show(1)">访问根节点</button><br />
			<button onclick="show(2)">访问当前节点的大儿子</button><br />
			<button onclick="show(3)">访问当前节点的小儿子</button><br />
			<button onclick="show(4)">访问当前节点的前一个兄弟</button><br />
			<button onclick="show(5)">访问当前节点的后一个兄弟</button><br />
			
			<script type="text/javascript">
				
				var curNode;
				
				function show(op)
				{
					if(op=="1")
					{
						curNode = document.documentElement; // 也就是html节点
					}
					else if(op=="2")
					{
						curNode = curNode.firstChild;
					}
					else if(op=="3")
					{
						curNode = curNode.lastChild; 
					}
					else if(op=="4")
					{
						curNode = curNode.previousSibling;
					}
					else if(op=="5")
					{
						curNode = curNode.nextSibling; 
					}
					
					// 显示节点的信息
					txtNodeName.value = curNode.nodeName;
					txtNodeType.value = curNode.nodeType;
					txtNodeValue.value = curNode.nodeValue;
					txtChildCount.value = curNode.childNodes.length;
				}
			</script>
		</body>
</html>
